<template>
<div id="zong">
   <!-- <van-count-down :time="time" format="mm:ss" :auto-start='jikai'/> -->
    <div id='neng'>当前能量值为{{nengliang}}</div>
  <p id='zp' v-if="jikai">00:{{time}}</p>
    <button @click="kai" id="but">开始</button>
    <div id="fen">得分:<span>{{index}}</span></div>
<img src="../assets/beijing.jpg" id='Zimg' >
 <div id='B'>
   <div :class="[yuan, {bb:v==weizhi}]" v-for="v in 16" :key="v" @click="dianji(v)">
   </div>
 </div>  
</div>
</template>

<script>
import { CountDown } from 'vant';
import { Dialog } from 'vant';
import axios from "axios";
export default {

data() {
    return {
       // 控制时间的开关
        jikai:false,
        time:60,
        // time:2*60*1000,
        //记录分数
        index:0,
        yuan:'b',
        //地鼠当前的位置
        weizhi:0,
        //解决连击加分问题
        lian:false,
        
        //地鼠随机出现返回函数
        AA:'',

        sum:0,
        yong:0,

        //控制开关只能开一次
        t:true

    }
},
created() {
    this.a();
},
methods: {
    a(){
 let id = parseInt(localStorage.getItem("id"));
    var _that = this;
      axios
        .get("/api/vue_admID?id="+id)
        .then((res) => {
        console.log(res.data.message[0]);
        this.sum=res.data.message[0].fenSum
        this.yong=res.data.message[0].fenJIAN
        })
        .catch((err) => {
          console.log(err);
        });
    },

    dianji(msg){
     console.log(msg);
    if(msg==this.weizhi&&this.lian){
       this.lian=false
       this.index++
      }

    },

    kai(){
        if(this.t){
        Dialog.confirm({
  message: '每次消耗现有能量5点是否继续',
       })
  .then(() => {
      this.t=false
      if(this.nengliang>=5){   
    this.b()
    }
      else{
          alert('你的能量不够了哦去做题吧')
      }
  })
  .catch(() => {
  
  });
    }    
    },
    b(){
  let id = parseInt(localStorage.getItem("id"));
  let fenJIAN=this.yong+5
    var _that = this;
      axios
        .get("/api/vue_admSUM?id="+id+'&&fenJIAN='+fenJIAN)
        .then((res) => {
       
         this.sum=res.data.S[0].fenSUM
         this.yong=res.data.J[0].fenJIAN

        })
        .catch((err) => {
          console.log(err);
        });

   this.AA=setInterval(()=>{
   this.lian=true
    this.weizhi=parseInt(Math.random()*16);
   if(this.time>0){
       this.jikai=true
   this.time--;
   }
   else{
       this.weizhi=0
       this.jikai=false
       clearInterval(this.AA);
   }
   },1000);

    }
   
},
computed:{
    nengliang(){
        return this.sum-this.yong
    }
}
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}

#zp{
    position: absolute;
    font-size: 25px;
    color: red;
    left: 75%;
    top: 9%;
}

#neng{
    position: absolute;
    top:4%;
    left: 20%;
}

#fen{
    position: absolute;
    font-size: 20px;
    top:8%;
    left: 20%;
    color: white;
}
#fen span{
    color: aquamarine;
    font-size: 30px;
}

#but{
    position: absolute;
    left: 40%;
    top: 8%;
    width: 80px;
    height: 40px;
    color: rgb(249, 246, 246);
    background-color: rgb(45, 240, 71);
    border: none;
    border-radius: 15px;
    
}
#zong{
    width: 100%;
    height: 100%;
    border: 1px solid rebeccapurple;
}

#Zimg{
    width: 100%;
    height: 100%;
}


 #B{ 
    
    width: 100%;
    height: 70%;
    border: 1PX solid wheat;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.b{
margin-top: 20px;
width: 23%;
height: 18%;
border: 1PX solid rgb(33, 238, 50);
background-image: url(../assets/logo.png);
background-size: 100% 100%;

} 

.bb{
background-image: url(../assets/shui.jpg);
background-size: 100% 100%; 
}

</style>